<template>
    <div class="detail">
        <meta name="referrer" content="no-referrer"/>
        <Header @vip_status="new_vip_status"/>
        <div id="title">
            <p>
            <h2><b>{{movie_info.name}}</b></h2></p>
            <span id="image"><img :src="movie_info.movie_img" height="300px" :alt="movie_info.name"></span>
            <div id="new_detail">
                <div id="p1"><p style="color: rgb(102,102,153)">导演:{{movie_info.director}}</p></div>
                <div id="p2"><p style="color: rgb(102,102,153)">主演:{{movie_info.performer}}</p></div>
                <div id="p3"><p style="color: rgb(102,102,153)">类型:{{movie_info.movie_categorys}}</p></div>
                <p id="p4" style="color: rgb(102,102,153)">上映时间:{{movie_info.show_time}}</p>
                <p class="p7" style="color: red" v-if="movie_info.movie_type">VIP独享</p>
<!--                <p class="p7" style="color: red" v-if="vip_show">VIP独享，充钱去吧</p>-->
                <button class="button1" @click="go_play(movie_info.id)" v-if="is_vip">立即播放</button>
<!--                <p class="p7" style="color: red" v-if="!movie_info.movie_type">免费观看</p>-->
                <button class="button1" @click="go_play(movie_info.id)" v-if="!movie_info.movie_type">立即播放</button>
            </div>
            <div id="star">
                <el-rate :max="10" v-model="value" disabled show-score text-color="#ff9900"
                         score-template="{value}"></el-rate>
            </div>
        </div>

        <div id="p5">
            <div id="span1" style="color: rgb(0,119,34)">
                <h4><b>{{movie_info.name}}电影简述...</b></h4>
            </div>
            <div id="p6"><p>{{movie_info.brief}}</p></div>
        </div>
        <div id="editor">
            <Editor/>
        </div>
        <!--返回顶部-->
        <el-backtop></el-backtop>

    </div>
</template>

<script>
    import Header from "../components/Header";
    import MovieMessage from "../components/MovieMessage";
    import Editor from "../components/Editor";


    export default {
        name: "MovieDetail",
        components: {
            Header,
            MovieMessage,
            Editor
        },
        data() {
            return {
                movie_id: 0,
                movie_info: '',
                value: 0,
                is_vip: false,
                vip_show: false,
                vip_show1: false,
            }
        },
        created() {
            this.get_movie_id();
            this.get_movie_data();
        },
        methods: {
            new_vip_status(e){
                console.log('new_vip_status',e)
                // this.is_vip = e
                console.log('this.movie_info.movie_type',this.movie_info['movie_type'])
                this.is_vip = e
                // location.reload()
                // if (this.movie_info['movie_type']===1){
                //     this.vip_show = true;
                //     if(e){
                //         this.vip_show1 = true
                //     }else {
                //         this.vip_show1 = false
                //     }
                // }else {
                //     this.vip_show1 = true
                // }
            },
            go_play(e) {
                this.$router.push(`/play/${e}`)
            },
            get_movie_id() {
                this.movie_id = this.$route.params.pk || this.$route.query.pk;
                if (this.movie_id < 6) {
                    let _this = this;
                    _this.$alert("对不起，电影不存在！", "警告", {
                        callback() {
                            _this.$router.go(-1);
                        }
                    });
                }
            },

            get_movie_data() {
                this.$axios.get(`${this.$settings.base_url}/yingshi/movie_detail/${this.movie_id}/`).then(response => {
                    this.movie_info = response.data;
                    this.value = parseFloat(response.data.level)
                }).catch(() => {
                    this.$message({
                        message: "对不起，访问页面出错！请联系客服工作人员！"
                    });
                })
            }
        }
    }
</script>

<style scoped>
    #editor {
        position: absolute;
        top: 700px;
        left: 300px;
    }

    #title {
        position: absolute;
        left: 300px;
    }

    #image {
        position: absolute;
        top: 80px;
        left: 20px;
    }

    #new_detail {
        position: absolute;
        top: 80px;
        left: 250px;
        width: 230px;
    }

    #p1 {
        position: relative;
        float: left;
    }

    #p2 {
        position: absolute;
        top: 35px;
        float: left;
    }

    #p3 {
        position: absolute;
        top: 70px;
        float: left;
    }

    #p4 {
        position: absolute;
        top: 105px;
        text-align: left;
        float: left;
    }

    .p7 {
        position: absolute;
        top: 140px;
        text-align: left;
        float: left;
    }

    .button1 {
        position: absolute;
        top: 170px;
        left: 0;
        float: left;
    }

    #p5 {
        position: absolute;
        top: 500px;
        width: 700px;
        left: 300px;
    }

    #p6 {
        position: absolute;
        top: 35px;
    }

    #span1 {
        float: left;
    }

    #star {
        position: absolute;
        float: left;
        top: 400px;
        width: 300px;
    }
</style>